<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>容器应用-镜像</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">

    <style>
        .docker-more-content {
            color: rgb(169, 183, 198);
            background-color: rgb(43, 43, 43);
            padding: 5px;
            min-height: 8em;
            display: block;
            width: 100%;
            border-width: 0;
            border-radius: 5px;
        }
    </style>
</head>
<body class="content-wrapper" style="padding: 15px">

<div class="card">
    <div class="card-body">
        <!--顶部条-->
        <div style="padding: 0 7px 15px 7px" class="clearfix">
            <!--搜索输入框组-->
            <div class="input-group pull-left" style="width: 50%">
                <input id="keyword" class="form-control" type="search" placeholder="名称">
                <div class="input-group-append">
                    <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
                </div>
            </div>
            <!--新增按钮-->
            <div class="btn-group pull-right" style="margin-left: 5px">
                <button type="button" class="btn btn-info dropdown-toggle dropdown-icon" data-toggle="dropdown">
                    <i class="fa fa-list-ul"></i> 新建镜像
                </button>
                <div class="dropdown-menu dropdown-menu-outline-info dropdown-menu-right">
                    <a id="new-docker-pull" class="dropdown-item dropdown-item-xs" href="javascript:void(0);"><i class="fa fa-download"></i> 仓库拉取</a>
                    <a id="new-docker-load" class="dropdown-item dropdown-item-xs" href="javascript:void(0);"><i class="fa fa-upload"></i> 本地上传</a>
                    <a id="new-docker-build" class="dropdown-item dropdown-item-xs" href="javascript:void(0);" style="display: none"><i class="fa fa-building"></i> 构建镜像</a>
                </div>
            </div>
        </div>
        <!--数据展示-->
        <div class="container-fluid">
            <table id="table" class="table table-sm table-hover table-bordered">
                <thead><tr>
                    <th style="min-width: 2em">#</th>
                    <th>名称</th>
                    <th>版本</th>
                    <th style="display: none">镜像ID</th>
                    <th style="width: 10em">创建时间</th>
                    <th style="min-width: 3em">尺寸</th>
                    <th style="width: 11em">操作</th>
                </tr></thead>
                <tbody><tr>
                    <td>{{index}}</td>
                    <td>{{name}}</td>
                    <td>{{tag}}</td>
                    <td style="display: none">{{id}}</td>
                    <td>{{created}}</td>
                    <td>{{size}}</td>
                    <td>
                        <button class="btn btn-xs btn-outline-primary more" data-id="{{id}}">
                            <i class="fa fa-comment-o"></i> 详情
                        </button>
                        <button class="btn btn-xs btn-outline-danger remove" data-id="{{id}}">
                            <i class="fa fa-times"></i> 删除
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-outline-info dropdown-toggle dropdown-icon" data-toggle="dropdown">
                                <i class="fa fa-list-ul"></i> 更多
                            </button>
                            <div class="dropdown-menu dropdown-menu-outline-info dropdown-menu-right">
                                <a class="dropdown-item dropdown-item-xs tag" data-id="{{id}}"  href="javascript:void(0);"><i class="fa fa fa-pencil"></i> 标记</a>
                                <a class="dropdown-item dropdown-item-xs download" data-id="{{id}}"  href="javascript:void(0);"><i class="fa fa-download"></i> 下载</a>
                                <a class="dropdown-item dropdown-item-xs push" data-id="{{id}}"  href="javascript:void(0);"><i class="fa fa-upload"></i> 推送</a>
                                <a class="dropdown-item dropdown-item-xs history" data-id="{{id}}"  href="javascript:void(0);"><i class="fa fa-clock-o"></i> 历史</a>
                            </div>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <!--加载更多-->
        <div id="load-more" class="text-sm-center text-primary" style="display: none;">
            <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
        </div>
        <!--正在加载-->
        <div id="loading" class="text-sm-center text-gray" style="display: none;">
            <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
        </div>
        <!--全部加载-->
        <div id="load-all" class="text-sm-center text-success" style="display: none;">
            <i class="fa fa-info-circle"></i> 已加载全部数据
        </div>
        <!--加载失败-->
        <div id="load-error" class="text-sm-center text-danger" style="display: none;">
            <i class="fa fa-exclamation-triangle"></i> 加载失败
        </div>
    </div>
</div>

<!--docker load-->
<div id="docker-load" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">

        <div class="bg-white">
            <button id="docker-load-ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="docker-load-cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>
<!--docker build-->
<div id="docker-build" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">

        <div class="bg-white">
            <button id="docker-build-ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="docker-build-cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>
<!--docker pull-->
<div id="docker-pull" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <div class="form-group">
            <label for="docker-pull-registry" class="require">镜像仓库</label>
            <div class="select2-info">
                <select class="select2" data-dropdown-css-class="select2-info" data-placeholder="请选择镜像仓库"
                        id="docker-pull-registry" style="width: 100%;" required></select>
            </div>
        </div>
        <div class="form-group">
            <label for="docker-pull-name" class="require">名称</label>
            <input type="text" class="form-control" id="docker-pull-name" placeholder="请填写镜像名称" required>
        </div>
        <div class="form-group">
            <label for="docker-pull-tag" class="require">标签</label>
            <input type="text" class="form-control" id="docker-pull-tag" placeholder="请填写镜像标签" required>
        </div>
        <div class="form-group">
            <code id="docker-pull-command" style="word-break: break-all;">docker pull xxx.xxx.xxx/xxx:xxx</code>
        </div>
        <div class="bg-white">
            <button id="docker-pull-ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="docker-pull-cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>
<!--docker more-->
<div id="docker-more" class="side-panel right width600 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <div class="container-fluid">
            <div id="docker-more-info">
                <div class="row" style="margin-bottom: 15px">
                    <div class="col-md-12" style="word-break: break-all"><b>ID:</b> {{id}}</div>
                </div>
                <div class="row" style="margin-bottom: 15px">
                    <div class="col-md-12" style="word-break: break-all"><b>镜像:</b> {{name}}:{{tag}}</div>
                </div>
                <div class="row" style="margin-bottom: 15px">
                    <div class="col-md-6"><b>创建时间:</b> {{created}}</div>
                    <div class="col-md-6"><b>尺寸:</b> {{size}}</div>
                </div>
                <div class="row" style="margin-bottom: 15px">
                    <div class="col-md-6"><b>操作系统:</b> {{os}}</div>
                    <div class="col-md-6"><b>CPU架构:</b> {{architecture}}</div>
                </div>
                <div id="docker-more-env">
                    <label>环境变量</label>
                    <div id="docker-more-env-content" class="docker-more-content">{{envContent}}</div>
                </div>
                <div id="docker-more-cmd">
                    <label>Cmd</label>
                    <div id="docker-more-cmd-content" class="docker-more-content">{{cmdContent}}</div>
                </div>
                <div id="docker-more-entrypoint">
                    <label>Entrypoint</label>
                    <div id="docker-more-entrypoint-content" class="docker-more-content">{{entrypointContent}}</div>
                </div>
            </div>
        </div>
        <div class="bg-white" style="margin-top: 15px">
            <button id="docker-more-close" class="btn btn-default"><i class="fa fa-times"></i> 关闭</button>
        </div>
    </div>
</div>
<!--docker upload-->
<div id="docker-upload" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <div class="form-group">
            <label for="docker-upload-file" class="require">镜像文件</label>
            <div class="input-group">
                <input type="file" class="form-control" id="docker-upload-file" placeholder="请选择镜像文件" required>
            </div>
            <div class="progress progress-xxs bg-white">
                <div id="docker-upload-progress" class="progress-bar bg-danger" style="width: 0%"></div>
            </div>
        </div>
        <div class="bg-white">
            <button id="docker-upload-ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="docker-upload-cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>
<!--docker pull-->
<div id="docker-tag" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <input type="hidden" id="docker-tag-id">
        <div class="form-group">
            <label for="docker-pull-name" class="require">名称</label>
            <input type="text" class="form-control" id="docker-tag-name" placeholder="请填写镜像名称" required>
        </div>
        <div class="form-group">
            <label for="docker-pull-tag" class="require">标签</label>
            <input type="text" class="form-control" id="docker-tag-tag" placeholder="请填写镜像标签" required>
        </div>
        <div class="form-group">
            <code id="docker-tag-command"></code>
        </div>
        <div class="bg-white">
            <button id="docker-tag-ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="docker-tag-cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var serverId = undefined;

    var select2DockerPullRegistryControl = new Select2Ctrl("#docker-pull-registry", Url.dockerService.dockerRegistryPage, "id", "name", "select2");
    select2DockerPullRegistryControl.init();

    var tableCtrl = new TableCtrl(
        Url.dockerService.dockerImagePage,
        Url.dockerService.dockerImageDetail,
        Url.dockerService.dockerImageCreate,
        undefined,
        Url.dockerService.dockerImageRemove,
        function (template, record, index) {
            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{name}}", "gm"), record.name)
                .replace(new RegExp("{{tag}}", "gm"), record.tag)
                .replace(new RegExp("{{created}}", "gm"), record.created)
                .replace(new RegExp("{{size}}", "gm"), record.size)
        },
        function () {
            return undefined;
        }
    );
    tableCtrl.pageSize = 100000000;
    tableCtrl.extraUrlSearch = function(url) {
        return url + "&serverId=" + serverId
    };
    tableCtrl.extraUrlCreate = function(url) {
        return url + "?serverId=" + serverId
    };
    tableCtrl.extraUrlModify = function(url, id) {
        return url + "?serverId=" + serverId
    };
    tableCtrl.extraUrlRemove = function(url, id) {
        var self = this;
        var record = self.getById(id);
        var image = record.name + ":" + record.tag;
        return this.removeUrl + "?serverId=" + serverId + "&id=" + encodeURIComponent(image);
    };
    tableCtrl.showDockerPull = function() {
        $("#docker-pull select.select2").attr("data-dropdown-css-class", "select2-info").val(null).trigger("change")
            .removeClass("select2-danger").addClass("select2-info").select2();
        $("#docker-pull input").removeClass("is-invalid").removeClass("is-valid").removeClass("is-warning").val("");
        this.extraShowCreate();
        $("#docker-pull").removeClass("hide");
    };
    tableCtrl.execDockerPull = function() {
        var self = this;
        var valid = true;
        $("#docker-pull select.select2").each(function (i, n) {
            if ($(n).attr("required") === "required" && Utils.isEmpty($(n).val())) {
                valid = false;
                $(n).attr("data-dropdown-css-class", "select2-danger")
                    .parent().removeClass("select2-info").addClass("select2-danger");
            } else {
                $(n).attr("data-dropdown-css-class", "select2-info")
                    .parent().removeClass("select2-danger").addClass("select2-info");
            }
        });
        $("#docker-pull input").each(function (i, n) {
            if ($(n).attr("required") === "required" && Utils.isEmpty($(n).val())) {
                valid = false;
                $(n).removeClass("is-valid").addClass("is-invalid");
            } else {
                $(n).removeClass("is-invalid").addClass("is-valid");
            }
        });
        if (!valid) {
            return;
        }

        var record = {};
        record.registryId = $("#docker-pull-registry").val();
        record.name = $("#docker-pull-name").val();
        record.tag = $("#docker-pull-tag").val();

        $.ajax({
            url: self.createUrl + "?serverId=" + serverId,
            type: HttpMethod.post,
            contentType: ContentType.json,
            data: JSON.stringify({pull: record}),
            success: function (result, status, xhr) {
                $("#docker-pull").addClass("hide");
                tableCtrl.pageNumber = 0;
                tableCtrl.records = [];
                tableCtrl.getRecords();
                parent.window.frameCtrl.toastr.success("正在拉取容器镜像，请稍后...");
            }
        });
    };
    tableCtrl.setDockerPullCommand = function () {
        var code1 = "xxx", code2 = "xxx", code3 = "xxx";
        if (Utils.notEmpty($("#docker-pull-registry").val())) {
            var registries = select2DockerPullRegistryControl.datas;
            for (var i = 0; i < registries.length; i++) {
                var registrie = registries[i];
                if (registrie.id === $("#docker-pull-registry").val()) {
                    code1 = registrie.url;
                    break
                }
            }
        }
        if (Utils.notEmpty($("#docker-pull-name").val())) {
            code2 = $("#docker-pull-name").val();
        }
        if (Utils.notEmpty($("#docker-pull-tag").val())) {
            code3 = $("#docker-pull-tag").val();
        }
        var code = code1 + "/" + code2 + ":" + code3;
        $("#docker-pull-command").html("docker pull " + code);
    };

    tableCtrl.showDockerTag = function(id) {
        $("#docker-tag select.select2").attr("data-dropdown-css-class", "select2-info").val(null).trigger("change")
            .removeClass("select2-danger").addClass("select2-info").select2();
        $("#docker-tag input").removeClass("is-invalid").removeClass("is-valid").removeClass("is-warning").val("");
        $("#docker-tag-id").val(id);

        $("#docker-tag").removeClass("hide");
    };
    tableCtrl.hideDockerTag = function () {
        $("#docker-tag").addClass("hide");
    };
    tableCtrl.setDockerTagCommand = function () {
        var id = $("#docker-tag-id").val();
        var record = this.getById(id);
        var code1 = "xxx", code2 = "xxx";
        if (Utils.notEmpty($("#docker-tag-name").val())) {
            code1 = $("#docker").val();
        }
        if (Utils.notEmpty($("#docker-tag-tag").val())) {
            code2 = $("#docker-tag-tag").val();
        }
        var code = code1 + ":" + code2;
        $("#docker-tag-command").html("docker tag " + record.name + ":" + record.tag + " " + code);
    };
    tableCtrl.execDockerTag = function() {
        var self = this;
        var valid = true;
        $("#docker-tag select.select2").each(function (i, n) {
            if ($(n).attr("required") === "required" && Utils.isEmpty($(n).val())) {
                valid = false;
                $(n).attr("data-dropdown-css-class", "select2-danger")
                    .parent().removeClass("select2-info").addClass("select2-danger");
            } else {
                $(n).attr("data-dropdown-css-class", "select2-info")
                    .parent().removeClass("select2-danger").addClass("select2-info");
            }
        });
        $("#docker-tag input").each(function (i, n) {
            if ($(n).attr("required") === "required" && Utils.isEmpty($(n).val())) {
                valid = false;
                $(n).removeClass("is-valid").addClass("is-invalid");
            } else {
                $(n).removeClass("is-invalid").addClass("is-valid");
            }
        });
        if (!valid) {
            return;
        }

        var record = {};
        record.id = $("#docker-tag-id").val();
        record.name = $("#docker-tag-name").val();
        record.tag = $("#docker-tag-tag").val();

        $.ajax({
            url: self.createUrl + "?serverId=" + serverId,
            type: HttpMethod.post,
            contentType: ContentType.json,
            data: JSON.stringify({tag: record}),
            success: function (result, status, xhr) {
                self.hideDockerTag();
                tableCtrl.pageNumber = 0;
                tableCtrl.records = [];
                tableCtrl.getRecords();
                parent.window.frameCtrl.toastr.success("标记成功");
            }
        });
    };

    tableCtrl.execDockerPush = function (id) {
        var record = this.getById(id);
        var image = record.name + ":" + record.tag;
        var url = Url.dockerService.dockerImagePush + "?serverId=" + serverId + "&id=" + encodeURIComponent(image);

        $.ajax({
            url: url,
            type: HttpMethod.post,
            contentType: ContentType.json,
            success: function (result, status, xhr) {
                self.hideDockerTag();
                tableCtrl.pageNumber = 0;
                tableCtrl.records = [];
                tableCtrl.getRecords();
                parent.window.frameCtrl.toastr.success("正在推送容器镜像，请稍后...");
            }
        });
    }

    tableCtrl.moreTemplate;
    tableCtrl.getMoreTemplate = function () {
        this.moreTemplate = $("#docker-more-info").prop("innerHTML");
        $("#docker-more-info").html("");
    }
    tableCtrl.getMoreData = function (id) {
        var record = this.getById(id);
        var image = record.name + ":" + record.tag;
        var url = this.detailUrl + "?serverId=" + serverId + "&id=" + encodeURIComponent(image);
        var self = this;
        $.ajax({
            url: url,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                var moreHtml = self.moreTemplate
                    .replace(new RegExp("{{id}}", "gm"), result.id)
                    .replace(new RegExp("{{name}}", "gm"), record.name)
                    .replace(new RegExp("{{tag}}", "gm"), record.tag)
                    .replace(new RegExp("{{created}}", "gm"), result.created)
                    .replace(new RegExp("{{size}}", "gm"), result.size)
                    .replace(new RegExp("{{os}}", "gm"), result.os)
                    .replace(new RegExp("{{architecture}}", "gm"), result.architecture)
                    .replace(new RegExp("{{envContent}}", "gm"), result.envContent)
                    .replace(new RegExp("{{cmdContent}}", "gm"), result.cmdContent)
                    .replace(new RegExp("{{entrypointContent}}", "gm"), result.entrypointContent);
                $("#docker-more-info").html(moreHtml);
                $("#docker-more").removeClass("hide");
            }
        });
    };

    tableCtrl.download = function (id) {
        var record = this.getById(id);
        var image = record.name + ":" + record.tag;
        var url = Url.dockerService.dockerImageDownload + "?serverId=" + serverId + "&id=" + encodeURIComponent(image);
        window.open(url, "_blank");
    };

    tableCtrl.showUpload = function () {
        $("#docker-upload-file").val("");
        $("#docker-upload-progress").removeClass("bg-warning").removeClass("bg-danger").removeClass("bg-success")
            .addClass("bg-info").css("width", "0%").parent().removeClass("bg-white");
        $("#docker-upload").removeClass("hide");
    };
    tableCtrl.hideUpload = function () {
        $("#docker-upload").addClass("hide");
    };
    tableCtrl.checkUploadRequire = function () {
        var valid = true;
        $("#docker-upload input:file").each(function (i, n) {
            if ($(n).attr("required") === "required" && $(n).prop("files").length === 0) {
                valid = false;
                $(n).removeClass("is-valid").addClass("is-invalid");
            } else {
                $(n).removeClass("is-invalid").addClass("is-valid");
            }
        });
        return valid;
    };
    tableCtrl.doUpload = function () {
        var self = this;

        if (!self.checkUploadRequire()) {
            return;
        }

        var executeCreate = function (fileId) {
            $.ajax({
                url: self.createUrl + "?serverId=" + serverId,
                type: HttpMethod.post,
                contentType: ContentType.json,
                data: JSON.stringify({load: {file: fileId}}),
                success: function (result, status, xhr) {
                    self.hideUpload();
                    tableCtrl.pageNumber = 0;
                    tableCtrl.records = [];
                    tableCtrl.getRecords();
                    parent.window.frameCtrl.toastr.success("正在上传容器镜像， 请稍候...");
                }
            });
        };

        var executeUpload = function () {
            var files = $("#docker-upload-file").prop("files");
            var $progress = $("#docker-upload-progress");
            if (files.length > 0) {
                var formdata = new FormData();
                formdata.append("multipartFile", files[0]);

                var xhr = new XMLHttpRequest();
                xhr.upload.onerror = function (ev) {
                    parent.window.frameCtrl.toastr.error("[" + xhr.status + "] " + xhr.responseJSON.error + ": " + xhr.responseJSON.message);
                    $progress.removeClass("bg-info").addClass("bg-danger")
                };
                xhr.upload.onprogress = function (ev) {
                    var per = Math.round(ev.loaded / ev.total * 9000 / 100);
                    $progress.css("width", per + "%");
                };
                xhr.upload.onloadstart = function (ev) {
                    $progress.removeClass("bg-warning").removeClass("bg-danger").removeClass("bg-success")
                        .addClass("bg-info").css("width", "0%").parent().removeClass("bg-white");
                    $("#docker-upload-ok").attr("disabled", "disabled");
                };
                xhr.upload.onload = function (ev) {

                };
                xhr.upload.onloadend = function (ev) {

                };
                xhr.onreadystatechange = function (ev) {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        $progress.removeClass("bg-info").addClass("bg-success").css("width", "100%");
                        $("#docker-upload-ok").removeAttr("disabled");

                        if (xhr.status === 200) {
                            var fileId = xhr.responseText;
                            executeCreate(fileId);
                        } else {
                            parent.window.frameCtrl.toastr.error("[" + xhr.status + "] " + xhr.responseJSON.error + ": " + xhr.responseJSON.message);
                        }
                    }
                };
                xhr.open(HttpMethod.post, Url.fileCreate, true);
                xhr.send(formdata);
            }
        }

        executeUpload();
    };

    tableCtrl.extraBind = function() {
        var self = this;
        $("#new-docker-pull").click(function () {
            self.showDockerPull();
        });
        $("#docker-pull-ok").click(function () {
            self.execDockerPull();
        });
        $("#docker-pull-cancel").click(function () {
            $("#docker-pull").addClass("hide");
        });
        $("#docker-pull-registry").on("select2:select", function () {
            self.setDockerPullCommand();
        });
        $("#docker-pull-name").change(function () {
            self.setDockerPullCommand();
        });
        $("#docker-pull-tag").change(function () {
            self.setDockerPullCommand();
        });
        $("#table").on("click", ".more", function () {
            var id = $(this).attr("data-id");
            self.getMoreData(id);
        });
        $("#table").on("click", ".download", function () {
            var id = $(this).attr("data-id");
            self.download(id);
        });
        $("#table").on("click", ".tag", function () {
            var id = $(this).attr("data-id");
            self.showDockerTag(id);
        });
        $("#table").on("click", ".push", function () {
            var id = $(this).attr("data-id");
            self.execDockerPush(id);
        });
        $("#table").on("click", ".history", function () {
            var imageId = $(this).attr("data-id");
            var record = self.getById(imageId);
            var uuid = Math.random().toString(36).slice(-8);
            var name = record.name + " 的 " + "历史";
            var url = "cloud/html/docker-image-history.html?serverId=" + serverId + "&imageId=" + encodeURIComponent(imageId)
            parent.window.frameCtrl.windowCtrl.open(uuid, name, url);
        });
        $("#docker-more-close").click(function () {
            $("#docker-more").addClass("hide");
        });
        $("#docker-upload-ok").click(function () {
            self.doUpload();
        });
        $("#docker-upload-cancel").click(function () {
            self.hideUpload();
        });
        $("#new-docker-load").click(function () {
            self.showUpload();
        });
        $("#docker-tag-ok").click(function () {
            self.execDockerTag();
        });
        $("#docker-tag-cancel").click(function () {
            self.hideDockerTag();
        });
    };

    tableCtrl.getTemplate();
    tableCtrl.getMoreTemplate();
    tableCtrl.bindEvent();

    var onWebSocketEvent = function (event) {
        if (event.type === "DOCKER_IMAGE_REFRESH") {
            tableCtrl.pageNumber = 0;
            tableCtrl.records = [];
            tableCtrl.getRecords();
        }
    };
    onWebSocketEvent.owner = window.location.href;
    parent.window.frameCtrl.websockerCtrl.eventListener.push(onWebSocketEvent);

    var onWindowActive = function () {
        parent.window.frameCtrl.titleSelectCtrl.load(Url.dockerService.dockerServerPage, "id", "name", serverId);
    }
    onWindowActive.owner = window.location.href;
    parent.window.frameCtrl.windowCtrl.tabChangeListers.push(onWindowActive);

    var onTitleSelectChange = function (value) {
        serverId = value;
        tableCtrl.pageNumber = 0;
        tableCtrl.records = [];
        tableCtrl.getRecords();
    }
    onTitleSelectChange.owner = window.location.href;
    parent.window.frameCtrl.titleSelectCtrl.listeners.push(onTitleSelectChange);

    parent.window.frameCtrl.titleSelectCtrl.load(Url.dockerService.dockerServerPage, "id", "name");
</script>

</body>
</html>